<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="熊迪账号" prop="account">
        <el-select v-model="queryParams.account" placeholder="请选择账号">
          <el-option
            v-for="dict in xdAccountList"
            :key="dict.id"
            :label="dict.username"
            :value="dict.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择审核状态" clearable>
          <el-option
            v-for="dict in dict.type.inventory_review_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="到仓状态" prop="arrivedStore">
        <el-select v-model="queryParams.arrivedStore" placeholder="请选择到仓状态" clearable>
          <el-option
            v-for="dict in dict.type.arrived_store_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请仓库" prop="stockPlusDeliveryId">
        <el-select v-model="queryParams.stockPlusDeliveryId" placeholder="请选择申请仓库" clearable>
          <el-option
            v-for="dict in storeAddressList"
            :key="dict.storeAddressId"
            :label="dict.storeName"
            :value="dict.storeAddressId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="库存单号：" prop="trackingNumber">
        <el-input v-model="queryParams.trackingNumber" placeholder="请输入库存单号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="三方编码：" prop="anotherName">
        <el-input v-model="queryParams.anotherName" placeholder="请输入三方编码" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">申请仓储</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="productList" border align="center">
      <el-table-column label="单号" align="center" prop="trackingNumber"/>
      <el-table-column label="商品信息" width="300">
        <template slot-scope="scope">
          <div class="flexBox">
            <div>
              <image-preview :src="scope.row.skuImage" width="60px" height="60px"/>
            </div>
            <div class="ml20">
              <div>商品名称：{{ scope.row.stockName }}</div>
              <div>商品货号：{{ scope.row.itemNo }}</div>
              <div>申请数量：{{ scope.row.trackingAmount }}</div>
            </div>
          </div>

        </template>
      </el-table-column>
      <el-table-column label="补货信息" align="center" prop="availableStock"/>
      <el-table-column label="审核状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.inventory_review_status" :value="scope.row.status"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="到仓状态" align="center" prop="arrivedStore">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.arrived_store_status" :value="scope.row.arrivedStore"></dict-tag>
        </template>
      </el-table-column>
<!--      <el-table-column label="备注" align="center" prop="skuPrice"/>-->
      <el-table-column label="申请仓库" align="center" prop="storeName"/>
      <el-table-column label="库存位置" align="center">
        <template slot-scope="scope">
          {{ scope.row.stockAreaCodeTitle + '-' + scope.row.stockGoodsCodeTitle + '-' + scope.row.locationNo }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleReplenishment(scope.row)" type="text">补货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNumber"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改FPX仓储信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="applyForm" :model="applyForm" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="userName">
              <el-input v-model="applyForm.userName" disabled placeholder="请输入账号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="stockName">
              <el-input v-model="applyForm.stockName" placeholder="请输入商品名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购价格(单个)" prop="purchasePrice">
              <el-input v-model="applyForm.purchasePrice" placeholder="请输入采购价格"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请仓库" prop="stockPlusDeliveryId">
              <el-select v-model="applyForm.stockPlusDeliveryId" placeholder="请选择申请仓库" clearable>
                <el-option v-for="dict in storeAddressList" :key="dict.storeAddressId" :label="dict.storeName"
                           :value="dict.storeAddressId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="数量" prop="skuNum">
              <el-input v-model="applyForm.skuNum" placeholder="请输入商品数量"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品编码" prop="anotherName">
              <el-input v-model="applyForm.anotherName" placeholder="请输入商品编码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="快递单号" prop="trackingNo">
              <el-input v-model="applyForm.trackingNo" placeholder="请输入快递单号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货号" prop="itemNo">
              <el-input v-model="applyForm.itemNo" placeholder="请输入货号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="普通预警数量" prop="ordinaryWarnNum">
              <el-input v-model="applyForm.ordinaryWarnNum" placeholder="请输入普通预警数量"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高危预警数量" prop="highWarnNum">
              <el-input v-model="applyForm.highWarnNum" placeholder="请输入高危预警数量"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="重量(kg)" prop="weight">
              <el-input v-model="applyForm.weight" placeholder="请输入商品重量(kg)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流成本" prop="logisticsCost">
              <el-input v-model="applyForm.logisticsCost" placeholder="请输入物流成本"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购凭证" prop="proof">
              <image-upload v-model="applyForm.proof" :is-show-tip="false"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="desp">
              <el-input v-model="applyForm.desp" placeholder="请输入备注" type="textarea"
                        :autosize="{ minRows: 3, maxRows: 6}"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--  补货  -->
    <ReplenishmentForm v-if="isOpenReplenishmentModal" :stockPlusId="stockPlusId" :storeAddressList="storeAddressList"
                       :userName="queryParams.account" @close="closeReplenishimentModel"/>
  </div>
</template>
<script>
import {
  queryInventory, queryXdAccount, queryStoreAddress, inventoryRequest
} from "@/api/warehouse/inventory";
import ReplenishmentForm from "@/views/warehouse/components/ReplenishmentForm.vue";

export default {
  name: "WarehousInfo",
  dicts: ['inventory_review_status', 'arrived_store_status'],
  components: {
    ReplenishmentForm
  },
  data() {
    return {
      buttonLoading: false,// 按钮loading
      loading: true,// 遮罩层
      ids: [], // 选中数组
      single: true,// 非单个禁用
      multiple: true, // 非多个禁用
      showSearch: true,// 显示搜索条件
      total: 0, // 总条数
      productList: [],// FPX仓储信息表格数据
      title: "",  // 弹出层标题
      open: false, // 是否显示弹出层
      queryParams: {   // 查询参数
        pageNumber: 1,
        pageSize: 10,
        status: undefined,// 审核状态
        arrivedStore: undefined,// 到仓状态
        trackingNumber: undefined, //库存所在仓库信息
        account: undefined,//熊迪账号
        stockPlusDeliveryId: undefined,//仓库地址id
        anotherName: undefined,//三方编码
      },
      xdAccountList: [],// 熊迪账号列表
      storeAddressList: [],// 申请仓库列表
      applyForm: {}, // 表单参数
      skuCode: "",
      rules: {    // 表单校验
        userName: [{required: true, message: "账号不能为空", trigger: "blur"}],
        trackingNo: [{required: true, message: "国内运单号不能为空", trigger: "blur"}],
        stockPlusDeliveryId: [{required: true, message: "请选择仓库", trigger: "change"}],
        stockName: [{required: true, message: "商品名称不能为空", trigger: "blur"}],
        purchasePrice: [{required: true, message: "采购价格不能为空", trigger: "blur"}],
        proof: [{required: true, message: "采购凭证不能为空", trigger: "change"}],
        skuNum: [{required: true, message: "商品数量不能为空", trigger: "blur"}],
        anotherName: [{required: true, message: "商品编码不能为空", trigger: "blur"}],
      },
      isOpenReplenishmentModal: false,// 补货弹窗开关
      stockPlusId: "",//库存id

    };
  },
  created() {
    this.userInfo = this.$store.state.user.urserInfo;
    this.getXdAccountList();
    this.getList();

  },
  methods: {
    /** 查询FPX仓储信息列表 */
    getList() {
      this.loading = true;
      queryInventory(this.queryParams).then(response => {
        this.productList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 打开补货弹窗
    handleReplenishment(row) {
      this.isOpenReplenishmentModal = true
      this.stockPlusId = row.id
    },
    // 关闭补货弹窗
    closeReplenishimentModel() {
      this.isOpenReplenishmentModal = false
      this.getList()
    },
    // 查询熊迪账号列表
    getXdAccountList() {
      queryXdAccount().then(res => {
        this.xdAccountList = res.rows
        this.queryParams.account = res.rows[0].username
        this.getStoreAddress();
      })
    },
    // 查询仓库列表
    getStoreAddress() {
      queryStoreAddress({account: this.queryParams.account}).then(res => {
        this.storeAddressList = res.data
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.applyForm = {
        userName: this.queryParams.account,
        stockName: undefined,
        purchasePrice: undefined,
        stockPlusDeliveryId: undefined,
        skuNum: undefined,
        anotherName: undefined,
        itemNo: undefined,
        ordinaryWarnNum: undefined,
        highWarnNum: undefined,
        weight: undefined,
        logisticsCost: undefined,
        proof: undefined,
        desp: undefined,
        trackingNo: undefined,
      };
      this.resetForm("applyForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNumber = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 申请仓储 */
    handleAdd(row) {
      this.reset();
      this.open = true;
      this.title = "库存申请";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["applyForm"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          inventoryRequest(this.applyForm).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          }).finally(() => {
            this.buttonLoading = false;
          })
        }
      })
    },
  }
};
</script>
